<template>
  <view v-if="visible && popupDetail" class="x-pop-ups">
    <p-pop1 v-if="popupDetail.styleType === 1" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop2 v-else-if="popupDetail.styleType === 2" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop3 v-else-if="popupDetail.styleType === 3" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop4 v-else-if="popupDetail.styleType === 4" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop5 v-else-if="popupDetail.styleType === 5" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop6 v-else-if="popupDetail.styleType === 6" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop7 v-else-if="popupDetail.styleType === 7" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop8 v-else-if="popupDetail.styleType === 8" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop9 v-else-if="popupDetail.styleType === 9" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
    <p-pop10 v-else-if="popupDetail.styleType === 10" :detail="popupDetail" @submit="handleSubmit" @close="handleClose" @ready="handleReady" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import PPop1 from './p-pop-1';
import PPop2 from './p-pop-2';
import PPop3 from './p-pop-3';
import PPop4 from './p-pop-4';
import PPop5 from './p-pop-5';
import PPop6 from './p-pop-6';
import PPop7 from './p-pop-7';
import PPop8 from './p-pop-8';
import PPop9 from './p-pop-9';
import PPop10 from './p-pop-10';

export default {
  name: 'XPopUps',
  components: {
    PPop1,
    PPop2,
    PPop3,
    PPop4,
    PPop5,
    PPop6,
    PPop7,
    PPop8,
    PPop9,
    PPop10
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popupDetail: null
    };
  },
  computed: {
    ...mapState({
      // 用户挽留弹框配置的优惠数组
      exitPopupList: state => state['pages'].exitPopupList,
      // 用户挽留弹框配置的优惠展示过的下标
      exitPopupIndex: state => state['pages'].exitPopupIndex,
      // 用户选择的商品数量
      productCount: state => state['pages'].productCount
    })
  },
  created() {
    this.initPopupDetail();
  },
  methods: {
    initPopupDetail() {
      const popupDetail = this.exitPopupList[this.exitPopupIndex];
      if (popupDetail) {
        this.popupDetail = Object.assign(popupDetail, {
          // 优惠价格需要计算商品数量
          totalDiscountAmount: this.$tools.formatNumber(popupDetail.discountAmount * this.productCount)
        });
        this.$XTrack('logsMapIndex', {
          exitPopupIndex: this.exitPopupIndex,
          exitPopupInfo: this.exitPopupList
        });
        this.$store.dispatch('pages/setData', {
          exitPopupIndex: this.exitPopupIndex < this.exitPopupList.length ? this.exitPopupIndex + 1 : 0
        });
        this.$XTrack('onDiscountPayShowEvent');
      } else {
        this.handleClose();
      }
    },
    handleClose() {
      this.$emit('close');
      // 更新store状态
      this.setStoreData();
      uni.navigateBack({
        delta: 1
      });
    },
    handleSubmit() {
      // 更新store状态
      this.setStoreData();
      this.$emit('update:visible', false);
      this.$emit('confirm', {});
    },
    handleReady() {
      // 初始化完成
      this.$emit('ready');
    },
    // 更新store状态
    setStoreData() {
      this.$store.dispatch('pages/setData', {
        payCancelTwoVisible: false,
        isCancelExitPopup: true,
        isConfirmPopup: true
      });
    }
  }
};
</script>

<style lang="scss">
  .x-pop-ups{
    width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1996;
  }
</style>
